<template id="accountEditer">
    <!--账号编辑/增加-->
    <el-dialog title="Account Edit"
               :visible.sync="dialogVisiable">
        <el-form :model="form">
            <el-form-item label="Account"
                          label-width="100">
                <el-input v-model="form.name"
                          auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="Name"
                          label-width="100">
                <el-input v-model="form.desc"
                          auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer"
              class="dialog-footer">
            <el-button @click="dialogVisiable=false">Cancel</el-button>
            <el-button @click="onAccountEditConfirmClick">OK</el-button>
        </span>
    </el-dialog>
</template>
<script>
    import md5 from 'js-md5'
    export default {
        data () {
            return {
                dialogVisiable: false,
                form: {
                    name: '', desc: '', isAdd: false, oriAccountName: ''
                }
            }
        },
        methods: {
            onAccountEditConfirmClick () {
                let json = {}
                json.name = this.form.name
                json.desc = this.form.desc
                json.pwd = md5('123456') // default pwd is 123456
                if (this.form.isAdd === false) {
                    this.$axios.put(this.$api.API_USER + '/' + this.form.oriAccountName, json).then(res => {
                        this.loadData()
                    })
                } else {
                    this.$axios.post(this.$api.API_USERS, json).then(res => {
                        this.loadData()
                    })
                }
            },
            loadData () {
                this.$emit('refresh')
                this.dialogVisiable = false
            }
        }
    }
</script>
